<template>
    <div class="venuePlace_page" ref="dtPage">
        <div class="main" v-html="content" >
        </div>
        <p class="read-num">阅读数：{{readNum}}</p>
        <!-- <div class="ceshi">
            <span>domHeight:{{domHeight}}</span>
            <span>viewportHeight:{{viewportHeight}}</span>
            <span>scrollTop:{{scrollTop}}</span>
            <span>浏览进度:{{look}}</span>
        </div> -->
    </div>
</template>
<script>
import wx from 'mixins/wx'
import {isWeiXin,openApp} from 'utils/common'
import {getUrlString} from 'utils/index'

export default {
    mixins: [wx],
    data() {
        return{
            address:'',
            inpAddress:'',
            point:{ // 默认人民广场
                lng:'',
                lat: ''
            },
            content: '',
            listenTime: 2,
            imgTimer: null,
            imgTimerCount: 0,
            timer: null,
            waitTime: 0,
            look: 0,
            imgClickCount: 0,
            readNum: 0,
            domHeight: 0,
            viewportHeight: 0,
            scrollTop:0
        }
    },
    mounted() {
        if(isWeiXin()){
            this.init()
            history.pushState(null, null, location.href)
            window.addEventListener('popstate', function () {
                WeixinJSBridge.call('closeWindow');
                document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false)
                wx.closeWindow();
            });
        }
    },
    methods: {
        init() {
            if(!getUrlString('code')){
                localStorage.removeItem('isAuth')
                localStorage.removeItem('token')
                let  urlHref = location.href.split('#')[0];
                window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxffdc2bd6f98f39ba&redirect_uri="+urlHref+"&response_type=code&scope=snsapi_base#wechat_redirect")
            }else {
                if(localStorage.getItem('token')){
                    this.queryData()
                    if(localStorage.getItem('isAuth') ==1) {
                        this.getPlace()
                    }
                }else {
                    this.login(getUrlString('code'))
                }
            }
        },
        login(code) {
            if(!code) return
           this.$http.post('H5/user/checkLogin',{code: code})
            .then(res=>{
                let data = res.data
                localStorage.setItem('token', data.token)
                if(res.code == 1003){
                    window.location.href = location.origin+location.pathname+'?id='+getUrlString('id')
                }else{
                    localStorage.setItem('isAuth', data.isAuth)
                    if(data.isAuth ==1) {
                        this.getPlace()
                    }else {
                        let obj = {
                            province: '',
                            city: '',
                            district: ''
                        }
                        this.subPlace(obj)
                    }
                    this.queryData()
                }
            })
            .catch(err=>{
                console.log(err)
            }) 
        },
        getPlace() {  //浏览器定位
            let that = this
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    console.log(r)
                    that.point = r.point
                    let obj = {
                        province: r.address.province,
                        city: r.address.city,
                        district: r.address.district
                    }
                    that.subPlace(obj)
                }
                else {
                    alert('failed'+this.getStatus());
                }
            },{enableHighAccuracy: true})

        },
        subPlace(obj) {
            let param ={
                id: getUrlString('id'),
                ...obj
            }
            this.$http.post('H5/user/view',param)
            .then(res=>{
                let data = res.data
            })
            .catch(err=>{
                console.log(err)
            })
        },
        queryData() {
            let param ={
                id: getUrlString('id')
            }
            this.$http.post('H5/article/getArticleDetail',param)
            .then(res=>{
                let data = res.data
                this.content = data.content
                document.title = data.title
                var url = location.origin+location.pathname+'?id='+getUrlString('id')||'' //用户要分享的网址
                var title = data.title //分享的标题
                var shareimg = data.cover //分享的图片
                var desc = data.desc //分享的描述信息
                this.readNum = data.readNum
                console.log(url)
                this.wxAjax(url, title, shareimg, desc)
                this.htmlOnLoadFun()
            })
            .catch(err=>{
                console.log(err)
            })
        },
        htmlOnLoadFun() {
            this.$nextTick(() => {
                document.addEventListener("touchstart",(e) => {
                    // e.preventDefault();
                    if(e.target.nodeName == 'IMG'){
                        this.imgTimer = setInterval(() => {
                            if(this.imgTimerCount >= (this.listenTime*1000)){
                                clearInterval(this.imgTimer)
                                this.imgClickCount = 1
                                this.imgTimer = null
                                return
                            }
                            this.imgTimerCount += 20
                        }, 20);
                    }
                })
                var imgList = document.getElementsByTagName('img');//图片集合
                var imgCount = imgList.length;//图片总数
                var imgLoad = 0;//加载完成的图片数量
                var domHeight = window.innerHeight;
                var viewportHeight = window.innerHeight;
                this.domHeight = domHeight
                this.viewportHeight = viewportHeight
                console.log('imgCount',imgCount);
                if(imgCount>0){
                    for (let i = 0; i < imgCount; i++) {
                        imgList[i].onload = () => {
                            imgLoad++;
                            console.log('imgLoad',imgLoad);
                            if (imgLoad === imgCount) {
                                console.log("图片加载完成 展示组件");
                                // alert()
                                domHeight = this.$refs.dtPage.offsetHeight
                                this.domHeight = domHeight
                                if(domHeight<=viewportHeight){
                                    this.look = 100
                                }
                                var scrollTop = 0
                                document.addEventListener('scroll', (e)=>{
                                    clearInterval(this.imgTimer)
                                    this.imgTimer = null
                                    this.imgTimerCount = 0
                                    scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                                    this.scrollTop = scrollTop
                                    var p = ((scrollTop/(domHeight-viewportHeight)).toFixed(2)*100).toFixed(0)
                                    p = p>100?100:p
                                    if(Number(this.look) <= Number(p)){
                                        this.look = p
                                    }
                                })
                            }
                        }
                    }
                }else {
                    domHeight = this.$refs.dtPage.offsetHeight
                    this.domHeight = domHeight
                    if(domHeight<=viewportHeight){
                        this.look = 100
                    }
                    var scrollTop = 0
                    document.addEventListener('scroll', (e)=>{
                        clearInterval(this.imgTimer)
                        this.imgTimer = null
                        this.imgTimerCount = 0
                        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                        this.scrollTop = scrollTop
                        var p = ((scrollTop/(domHeight-viewportHeight)).toFixed(2)*100).toFixed(0)
                        p = p>100?100:p
                        if(Number(this.look) <= Number(p)){
                            this.look = p
                        }
                    })
                }
                
                document.addEventListener("touchend",(e) =>{
                    // e.preventDefault();
                    clearInterval(this.imgTimer)
                    this.imgTimer = null
                    console.log(this.imgTimerCount)
                    console.log('end')
                })
                this.lookingData()
            })
        },
        lookingData() {
            this.timer = setInterval(() => {
                let param ={
                    id: getUrlString('id'),
                    look: this.look,
                    wait: this.waitTime,
                    times: this.imgClickCount||0
                }
                this.$http.post('H5/user/lookThrough',param)
                .then(res=>{
                    let data = res.data
                    if(this.imgClickCount == 1){
                        clearInterval(this.imgTimer)
                        this.imgTimerCount = 0
                        this.imgTimer = null
                        this.imgClickCount = 0
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
                this.waitTime += 1
            }, 1000);
        }
    }
}
</script>
<style lang="scss">
    .venuePlace_page{
        max-width: 100%;
        overflow: hidden;
        padding: 0.20rem;
        .ceshi{
            position: fixed;
            font-size: 20px;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            color: red;
        }
        .main{
            img{
                max-width: 100%;
                margin: 0.10rem auto;
            }
            video{
                max-width: 100%;
                margin: 0.10rem auto;
            }
            font-size: 0.28rem;
        }
        .read-num{
            margin: 0.20rem 0rem 0.2rem;
            font-size: 14px;
            color: #B7C0CD;
        }
    }
</style>
